---
order: 2
title: AnimatorController
type: Animation
label: Animation
---
## Introduction

The `AnimatorController` ([API](/apis/core/#AnimatorController)) helps you organize a set of animations for a character or other animated object. It visualizes the animation playback logic of animated objects like a flowchart through the `AnimatorStateMachine` ([detailed introduction](/docs/animation/state-machine/)) and automatically switches `AnimatorState` and plays the referenced `AnimationClips` ([detailed introduction](/docs/animation/clip/)) when conditions are met.

### Main Components
#### AnimatorControllerLayer
`AnimatorControllerLayer` are used to organize and manage `AnimatorStateMachines` within an `AnimatorController`. Each `AnimatorControllerLayer` has its own `AnimatorStateMachine`. When the `Animator` component runs, all `AnimatorControllerLayer` run simultaneously, and multiple `AnimatorControllerLayer` achieve animation blending through different weights and blending modes. For detailed usage of `AnimatorControllerLayer`, please refer to the [AnimatorControllerLayer](/docs/animation/layer/) document.

#### AnimatorControllerParameter
`AnimatorControllerParameter` are used to control the switching of `AnimatorState` in the `AnimatorStateMachine`. When the conditions of the `AnimatorStateTransition` are met by setting the values of the `AnimatorControllerParameter`, the `AnimatorStateTransition` will trigger, switching to the target `AnimatorState`. For detailed usage of `AnimatorControllerParameter`, please refer to the [AnimatorStateMachine](/docs/animation/state-machine/) document.

## Editor Usage

Through the `AnimatorController` editor, users can organize the playback logic of `AnimationClips` ([detailed introduction](/docs/animation/clip)).

1. Prepare the `AnimationClips` ([detailed introduction](/docs/animation/clip)).

<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*lq8jQIgm_-cAAAAAAAAAAAAADsJ_AQ/original" />

2. To organize the playback of these `AnimationClips`, we need to create an `AnimatorController` asset. There are two ways to create an `AnimatorController`:
    1. Right-click on the blank space in the **[Asset Panel](/docs/assets/interface)** and select `Create` -> `Animation Controller`.

      <Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*61Q7S62IZxQAAAAAAAAAAAAADsJ_AQ/original" /> 

    2. Click the add asset button `+` and select `Animation Controller`.

      <Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*QqpxS6I9D90AAAAAAAAAAAAADsJ_AQ/original" /> 

3. The newly created `AnimatorController` has no data. We need to edit it, double-click the asset, and add an `AnimatorState` ([detailed introduction](/docs/animation/state-machine/#动画状态)).

<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*7bZmS4iZ10gAAAAAAAAAAAAADsJ_AQ/original" />

4. Click the added `AnimatorState` to bind an `AnimationClip` ([detailed introduction](/docs/animation/clip)).

<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*xfPTRJg-hOMAAAAAAAAAAAAADsJ_AQ/original" />

5. Bind the `AnimatorController` asset to the `Animator` component ([detailed introduction](/docs/animation/animator)).

<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*H_ShSaWEXtIAAAAAAAAAAAAADsJ_AQ/original" />

6. Now you can play the `Idle` animation in the exported project by calling `animator.play("New State")`.

<Callout type="info">
For further usage of the AnimatorController editor, please refer to the [AnimatorStateMachine](/docs/animation/state-machine/) document.
</Callout>

## Script Usage

Before using scripts, it is recommended to read the following documents:

- [Script](/docs/script/script)
- [Animation System Composition](/docs/animation/system)

### Bind AnimatorController

You can bind the `AnimatorController` to the [Animator](/apis/core/#Animator) through the [animator.animatorController](/apis/core/#Animator-animatorController) property.

<Callout type="info">
If the loaded glTF model has animation data, the engine will automatically bind a default `AnimatorController` to each glTF instance, and you can directly use it to play the animations within it.
</Callout>

```typescript
animator.animatorController = new AnimatorController(engine);
animator.play("New State");
```

#### Reuse Animation Data

The `AnimatorController` is a data storage class and does not contain runtime data. Based on this design, as long as the skeletal node hierarchy and naming of the model bound to the `Animator` component are the same, we can reuse the animation data of this model.

```typescript
const animator = model1.getComponent(Animator);
// Get the AnimatorController of the animation model
animator.animatorController = animationGLTF.getComponent(Animator).animatorController;
// Play the animation of animationGLTF
animator.play("anim from animationGLTF");
```
